/**
 * @author shaosong
 * @description 博客发布页面
 */
import React, { useState } from 'react'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
import emoji from 'markdown-it-emoji'
import subscript from 'markdown-it-sub'
import superscript from 'markdown-it-sup'
import footnote from 'markdown-it-footnote'
import deflist from 'markdown-it-deflist'
import abbreviation from 'markdown-it-abbr'
import insert from 'markdown-it-ins'
import mark from 'markdown-it-mark'
import tasklists from 'markdown-it-task-lists'
import hljs from 'highlight.js'
import 'react-markdown-editor-lite/lib/index.css'
import './index.less'
import { Col, Row } from 'antd'
export class MarkDownLiteProps {
  onChangeData?: (data: { html: any; text: any }) => void
  value?: any
}

const MarkDownLite: React.FC<MarkDownLiteProps> = ({ onChangeData, value }) => {
  const mdParser = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    highlight: function (str: string | HighlightOptions, lang: string) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value
        } catch (__) {}
      }
      return '' // use external default escaping
    }
  })
    .use(emoji)
    .use(subscript)
    .use(superscript)
    .use(footnote)
    .use(deflist)
    .use(abbreviation)
    .use(insert)
    .use(mark)
    .use(tasklists, { enabled: true })

  const renderHTML = (text: any) => {
    // 模拟异步渲染Markdown
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(mdParser.render(text))
      }, 1000)
    })
  }
  return (
    <div className="page-markdown-blog">
      <div className="markdown-editor-div">
        <Row>
          <Col span={8} className="markdown-editor-div-left">
            文章内容
          </Col>
          <Col span={16} style={{ textAlign: 'right' }}>
            <span>
              <a
                target="_blank"
                href="#/home/blog/context?contextUuid=e319f5f20b934e7aa2b02160ba76f2e5"
              >
                markdown 文档
              </a>
            </span>
          </Col>
        </Row>
      </div>
      <MdEditor
        style={{ height: '50vh' }}
        defaultValue={''}
        value={value}
        config={{
          view: {
            menu: true,
            md: true,
            html: true
          },
          imageUrl: 'https://octodex.github.com/images/minion.png'
        }}
        renderHTML={renderHTML}
        onChange={onChangeData}
      />
    </div>
  )
}

MarkDownLite.defaultProps = new MarkDownLiteProps()
export default MarkDownLite
